<script setup lang="ts">
import ReCol from "@/components/ReCol";
import { ref } from "vue";

const props = withDefaults(defineProps<{
  formInline: {
    name: string;
    content: string;
    priority: number;
    deadline_hours: number;
    feedback_type: Array<string>;
  }
}>(), {
  formInline: () => ({
    name: "",
    content: "",
    priority: 1,
    deadline_hours: 24,
    feedback_type: ["text"]
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });

const formRules = {
  name: [
    { required: true, message: "任务名称不能为空", trigger: "blur" },
    { min: 2, max: 50, message: "任务名称长度应在2-50个字符", trigger: "blur" }
  ],
  content: [
    { required: true, message: "任务描述不能为空", trigger: "blur" },
    { max: 200, message: "任务描述不能超过200个字符", trigger: "blur" }
  ],
  priority: [
    { required: true, message: "优先级不能为空", trigger: "change" }
  ],
  deadline_hours: [
    { required: true, message: "任务期限不能为空", trigger: "blur" }
  ],
  feedback_type: [
    { required: true, message: "请至少选择一种反馈类型", trigger: "change" }
  ]
};
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="100px"
  >
    <el-row :gutter="30">
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="任务名称" prop="name">
          <el-input
            v-model="newFormInline.name"
            clearable
            placeholder="请输入任务名称，如：客户首次回访"
            style="width: 100%"
          />
        </el-form-item>
      </re-col>

      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="任务描述" prop="content">
          <el-input
            v-model="newFormInline.content"
            :rows="3"
            type="textarea"
            placeholder="请详细描述任务内容和要求，如：主动联系客户，了解产品使用情况"
            style="width: 100%"
          />
        </el-form-item>
      </re-col>

      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="优先级" prop="priority">
          <el-select
            v-model="newFormInline.priority"
            placeholder="请选择优先级"
            style="width: 100%"
          >
            <el-option :value="1" label="低优先级">
              <span style="float: left">低</span>
              <span style="float: right; color: #8cc5ff; font-size: 13px">一般任务</span>
            </el-option>
            <el-option :value="2" label="中优先级">
              <span style="float: left">中</span>
              <span style="float: right; color: #ffa500; font-size: 13px">重要任务</span>
            </el-option>
            <el-option :value="3" label="高优先级">
              <span style="float: left">高</span>
              <span style="float: right; color: #f56c6c; font-size: 13px">紧急任务</span>
            </el-option>
            <el-option :value="4" label="紧急">
              <span style="float: left">紧急</span>
              <span style="float: right; color: #ff0000; font-size: 13px">最高优先级</span>
            </el-option>
          </el-select>
        </el-form-item>
      </re-col>

      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="任务期限" prop="deadline_hours">
          <el-input-number
            v-model="newFormInline.deadline_hours"
            :min="1"
            :max="720"
            :step="1"
            style="width: 100%"
          />
          <div style="color: #909399; font-size: 12px; margin-top: 4px;">
            单位：小时
          </div>
        </el-form-item>
      </re-col>

      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="反馈类型" prop="feedback_type">
          <el-checkbox-group v-model="newFormInline.feedback_type">
            <el-checkbox value="text">
              <span style="font-weight: normal;">文本反馈</span>
              <div style="color: #909399; font-size: 12px; margin-top: 2px;">
                完成任务后需提交文字说明
              </div>
            </el-checkbox>

            <el-checkbox value="image" style="margin-top: 30px;">
              <span style="font-weight: normal;">图片反馈</span>
              <div style="color: #909399; font-size: 12px; margin-top: 2px;">
                完成任务后需上传图片作为凭证
              </div>
            </el-checkbox>
          </el-checkbox-group>
    
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<style scoped lang="scss">
:deep(.el-checkbox) {
  display: block;
  margin-bottom: 15px;
  
  .el-checkbox__label {
    white-space: normal;
    line-height: 1.4;
  }
}

:deep(.el-input-number) {
  .el-input__inner {
    text-align: left;
  }
}
</style> 